<template>
    <div class="h-meta-form">
      <a-layout style="height: 100vh;">
      <a-layout-sider  theme="light" width="230" style="border-right: 1px solid rgb(228, 231, 237);">
        <div class="components">
          <h3>控件库</h3>
          <ComponentGroup
            title="基础组件"
            :fields="basicFields"
            :list="components.basicComponents"
          />
        </div>
      </a-layout-sider>
      <a-layout>
        <a-layout>
          <a-layout-header style="height: 50px;line-height: 50px; background-color: #fff;border-bottom: 1px solid rgb(228, 231, 237);">
            <ToolBar                      
              :widgetForm="widgetForm"
              v-model:configTab="configTab"
            ></ToolBar>
          </a-layout-header>
          <a-layout-content>
            <DesignForm
              ref="widgetFormRef"
              v-model:widgetForm="widgetForm"
              v-model:widgetFormSelect="widgetFormSelect"
            ></DesignForm>
          </a-layout-content>
       </a-layout>
        <a-layout-sider  theme="light" style="border-left: 1px solid rgb(228, 231, 237);">
          <DesignConfig 
              v-show="configTab === 'widget'"
              v-model:select="widgetFormSelect"
          />
          <FormConfig 
              v-show="configTab === 'form'"
              v-model:config="widgetForm.config"
          />
        </a-layout-sider>
      </a-layout>
      </a-layout>
    </div>
 </template>
<script>
import {toRefs,reactive,watch,ref} from 'vue'
// 头部工具栏
import ToolBar from "./components/ToolBar.vue"
// 控件库模版
import ComponentGroup from "./components/ComponentGroup.vue"
// 设计器表单拖拽界面
import DesignForm from "./components/design/DesignForm.vue"
// 设计器表单控件配置界面
import DesignConfig from "./components/setting/DesignConfig.vue"
import FormConfig from "./components/setting/FormConfig.vue"
import { components } from './config/index.js'


export default {
  components:{
    ToolBar,
    ComponentGroup,
    DesignForm,
    DesignConfig,
    FormConfig
  },  
  props: {
    title: String,
    basicFields: {
      type: Array,
      default: () => [
        'input',
        'number',
        'radio',
        'checkbox',
        'time',
        'date',
        'rate',
        'select',
        'switch',
        'slider',
        'color',
      ]
    },
  },
  data(){
    return {
      components
    }
  },
  setup(){
    let widgetForm = JSON.parse(JSON.stringify(components.widgetForm));
    // 数据源
    const state = reactive({
      widgetForm: widgetForm,
      widgetFormSelect: undefined,
    })
    // 表单状态
    const configTab = ref('form')
    watch(()=>state.widgetFormSelect,()=>{
      configTab.value = 'widget'
    })
    return {
      ...toRefs(state),
      configTab
    }
  }
}
</script>